<template>
  <div class="cds" :style="{ width: size.x + 'px' }">
    <Card v-for="item in cardDataList" :key="item.id" ref="cards"></Card>
  </div>
</template>

<script>
import Card from './card.vue';
import { getMinY, generateColorById, sleep } from './tooler'

export default {
  props: ['size', 'offset', 'height', 'timer', 'col', 'types'],
  components: { Card },
  data() {
    return {
      list: [],
      cardDataList: [],
      cardViewList: [],
      min: 0,
      max: 9000,
      row: 7,
      //牌类型的列表
      cardIds: [],
    }
  },
  created() {
    // this.init();
  },
  mounted() {
    // const cards = this.$refs.cards
    // cards.forEach((item, i) => {
    //   item.setPosition(this.list[i].y);
    //   item.setMoveDistance(this.size.y * this.row - this.height);
    //   item.setPlayTimer(this.timer + this.col * 90);
    //   item.setColor(this.list[i].color);
    // })
  },
  methods: {
    async addData(ary, colIndex, timers = 0) {

      // this.cardIds = ary.concat(this.cardIds);
      // this.cardDataList = [];
      // const row = this.cardIds.length;
      const row = this.cardDataList.length + ary.length;
      let yStart = this.height - row * this.size.y;

      const curDataList = [];

      for (let i = 0; i < ary.length; i++) {
        const num = ary[i];
        const y = yStart + i * this.size.y;
        // console.log("y", y)
        curDataList.push({
          id: Math.random().toString(36).substring(0, 8),
          txt: num,
          pid: timers + '-' + (colIndex * 7 + i),
          color: generateColorById(num),
          y,
        })
      }

      this.cardDataList = curDataList.concat(this.cardDataList)


      await sleep(300)
      const cards = this.$refs.cards


      cards.forEach((item, i) => {
        // if(i < row){
        item.setPosition(this.cardDataList[i].y);
        // if(timers == 0){
        //   item.setMoveDistance(this.size.y * row - this.height - otherNum * this.size.y - this.size.y);
        // }
        // else{
        //   item.setMoveDistance(this.size.y * row);
        // }

        // item.setPlayTimer(this.timer + this.col * 120);
        item.setId(this.cardDataList[i].id);
        item.setColor(this.cardDataList[i].color);
        item.setPid(this.cardDataList[i].pid);
        item.setTxt(this.cardDataList[i].txt);
        item.setSize(this.size);
        item.setHeight(this.height)
        item.setCol(this.col)

        if (colIndex == 0) {
          console.log(item.txt, item.coords.y)
        }
        // }
      })

      if (colIndex == 0) {
        console.log(ary);
        console.log("yStart", yStart)
        console.log("cardDataList", this.cardDataList)
        console.log(this.cardDataList.map(i => i.txt))
        console.log("cards", cards)
      }

    },
    clearOutside() {
      const cards = this.$refs.cards
      const n = cards.findIndex(item => item.coords.y >= this.height);
      console.log("移除", n);
      if (n == -1) return;
      // cards.forEach((item, i)=>{
      //   console.log(i, item.coords.y);

      // })
      this.cardDataList = this.cardDataList.slice(0, n);
      if (this.col == 0) {
        console.log(this.cardDataList)
      }
      // this.cardDataList.splice(n);
      // this.cardDataList = [...this.cardDataList]
    },
    async initData(ary, colIndex, timers, otherNum) {
      const row = ary.length
      let yStart = this.height - row * this.size.y
      if (timers > 0) {
        yStart = -row * this.size.y
      }
      console.log("yStart", yStart)
      this.cardDataList = []
      for (let i = 0; i < ary.length; i++) {
        let num = ary[i];
        this.cardDataList.push({
          id: timers + '-' + (colIndex * 7 + i),
          txt: num,
          pid: timers + '-' + (colIndex * 7 + i),
          color: generateColorById(num),
          y: yStart + this.offset + i * this.size.y,
        })
      }

      this.list = this.cardDataList.concat(this.list)
      await sleep(30)
      const cards = this.$refs.cards
      cards.forEach((item, i) => {
        if (i < row) {
          item.setPosition(this.list[i].y);
          if (timers == 0) {
            item.setMoveDistance(this.size.y * row - this.height - otherNum * this.size.y - this.size.y);
          }
          else {
            item.setMoveDistance(this.size.y * row);
          }

          item.setPlayTimer(this.timer + this.col * 120);
          item.setColor(this.list[i].color);
          item.setPid(this.list[i].pid);
        }

      })
    },
    run() {
      this.$refs.cards.forEach(item => {
        item.run()
      })
    },
    setMoveDistance(n) {
      const cards = this.$refs.cards
      // let y = getMinY(cards);
      // cards.forEach(item => {
      //   if(item.coords.y > this.height){
      //     y = y - this.size.y
      //     item.setPosition(y);
      //   }
      // })
      cards.forEach(item => {
        item.setMoveDistance(n * this.size.y);
      })
    },
    setListIdx() {
      this.$refs.cards.forEach(item => {
        item.setListIdx()
      })
    },
    reset() {
      const cards = this.$refs.cards
      let y = getMinY(cards);
      cards.forEach(item => {
        if (item.coords.y > this.height) {
          y = y - this.size.y
          item.setPosition(y);
        }
      })
      cards.forEach(item => {
        item.setMoveDistance(-y);
      })
    },
    fixPosition(removeList) {
      const cards = this.$refs.cards
      cards.forEach((item) => {
        let distance = 0;
        removeList.forEach(i => {
          if (item.coords.y < i.coords.y) {
            distance += this.size.y
          }
        })
        item.setMoveDistance(distance)
      })

      //被消除的移到最下方
      // let y = getMinY(cards);
      removeList.forEach(item => {
        // y = y - this.size.y
        item.setPosition(this.height * 2);
        // item.setMoveDistance(removeList.length * this.size.y);
      })

      //删除元素
      // removeList.forEach(item=>{
      //   this.cardDataList = this.cardDataList.filter(i=>i.id!==item.id)
      // })

    },
    getItems() {
      const cards = this.$refs.cards;
      return cards;
    },
    setPlayTimer(v, same = false) {
      const cards = this.$refs.cards
      cards.forEach((item) => {
        const t = same ? v : (v + this.col * 90)
        item.setPlayTimer(t);
        console.log(item.playTimer, item.moveDistance)
      })
    }
    // check(removes){
    //   const cards = this.$refs.cards;
    //   let y = getMinY(cards);
    //   cards.forEach((item) => {
    //     if(item.coords.y > this.height){
    //       y = y - this.size.y
    //       item.reset(y)
    //     }
    //   })
    // }

  }
}
</script>

<style scoped>
.cds {
  position: relative;
}
</style>